<!DOCTYPE html>
<html>
<head th:include="aHomeProducts/include :: header"></head>
<body>
<div id="app">
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/hash1">切换至com1</router-link>
        <router-link to="/hash2">切换至com2</router-link>
        <router-link to="/hash3">切换至com3</router-link>
    </p>
    <router-view></router-view>

  
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
    </style>


</div>
</body>


<script>
    // 1. 定义（路由）组件。
    const com1 = { template: '<div>路由111111</div>' }
    const com2 = { template: '<div>路由2</div>' }
    const com3 = {
        template: 'a'
    }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是 通过 Vue.extend()
    //  创建的组件构造器， 或者，只是一个组件配置对象.
    const routes = [
        { path: '/hash1', component: com1 },
        { path: '/hash2', component: com2 },
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 要通过 router 配置参数注入路由，从而让整个应用都有路由功能
    const app = new Vue({
        router,
        data:{
            isCollapse: false
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }).$mount('#app');//el是自动挂载，mount是手动挂载（延时）
    //判断是否登录

    //跳转登录
    router.push('/hash2')
</script>
</html>
